<template>
    <div>
        <router-link to="/addressList" class="my_order">
            <div class="my_order_div">
            <p class="address">{{$store.getters.userInfo.school_name}}{{$store.getters.userInfo.dormitory_name}}{{$store.getters.userInfo.consignee_address}}</p>
            <p>{{$store.getters.userInfo.consignee_name}}-{{$store.getters.userInfo.consignee_phone}}</p>
            </div>
            <p class="my_order_icon">
                <i class="iconfont icon-you"></i>
            </p>
      </router-link>
      <div class="my_order">
            <div class="my_order_div">
                <P>{{$store.getters.shop_name.shop_name}}</P>
            </div>
      </div>
      <div class="my_order" v-for="(item,index) of $store.getters.cart" :key="index">
              <img class="product-pic" :src="$store.getters.base_url+item.pic">
            <div class="my_order_div">
                <p>{{item.name}}</p>
                <p>￥{{item.price}}</p>
            </div>
            <p class="item-right-text">X{{item.num}}</p>
      </div>
      <div class="my_order">
          <div class="my_order_div integral">
              <!-- <span></span> -->
              <mt-switch v-model="isIntegral" :disabled="parseFloat($store.getters.carriage)+parseFloat($store.getters.total)>=$store.getters.userInfo.integral">可用余额:{{$store.getters.userInfo.integral}}元</mt-switch>
          </div>
      </div>
      <div class="my_order">
          <div class="my_order_div">
              <p class="right-text">商品总价:￥{{$store.getters.total}}</p>
          </div>
      </div>
        <div class="my_order">
          <div class="my_order_div">
              <p class="right-text">配送费:￥{{$store.getters.carriage}}</p>
          </div>
        </div>
        <div class="my_order">
          <div class="my_order_div">
              <p class="right-text">总计:￥{{($store.getters.carriage*100000+$store.getters.total*100000)/100000}}</p>
          </div>
        </div>
        <div class="my_order">
            <div class="my_order_div">
                <textarea v-model="remark" placeholder="填写商品备注" cols="30" rows="10" class="remark"></textarea>
            </div>
        </div>
            <mt-button class="btn" @click="subOrder">提交订单</mt-button>
    </div>
</template>
<script>
import { newOrder,pay } from '../api'
import {Toast,MessageBox} from 'mint-ui'
export default {
    name:'creatOrder',
    data() {
        return {
            remark:"",
            isIntegral:false
        }
    },
    methods:{
        subOrder(){
            MessageBox.confirm(`${this.$store.getters.shop_name.is_refues?'该商铺可退单,是否确认下单':'该商铺不可退单,是否确认下单'}`).then(action => {
                // console.log(window.location.host);
                const data = {store_id:this.$route.query.store_id,
                    token:this.$store.getters.token,
                    user_id:this.$store.getters.userInfo.id,
                    total:this.$store.getters.total,
                    remark:this.remark,
                    delivery_price:this.$store.getters.carriage,
                    pay_type:this.isIntegral?1:0,
                    address_id:this.$store.getters.userInfo.address_id
                }
                // console.log(data);
                newOrder(data).then(res=>{
                    console.log(res);
                    Toast(res.msg)
                    if(res.code == 202){
                        this.$store.commit("YUE",parseFloat(this.$store.getters.carriage)+parseFloat(this.$store.getters.total))
                        // window.location.href = `http://${window.location.host}/#/payState?state=1`;
                        this.$router.push({path:'/payState',query:{state:1}})
                        return;
                    }else if(res.code == 201){
                        this.$router.push({path:'/payState',query:{state:0}})
                        return;
                    }
                    const paramsData={ 
                        token:this.$store.getters.token,
                        order_no:res.data.order_no,
                        openid:this.$store.getters.userInfo.openid
                    } 
                    pay(paramsData).then(res=>{
                        console.log(res.data);
                        let params = res.data;
                            WeixinJSBridge.invoke(
                                'getBrandWCPayRequest', {
                                    "appId":params.appId,     //公众号名称，由商户传入     
                                    "timeStamp":params.timeStamp,         //时间戳，自1970年以来的秒数     
                                    "nonceStr":params.nonceStr, //随机串     
                                    "package":params.package,     
                                    "signType":params.signType,         //微信签名方式     
                                    "paySign":params.paySign //微信签名 
                                },
                                function(res){
                                    console.log(res);
                                if(res.err_msg === "get_brand_wcpay_request:ok" ){   
                                // 使用以上方式判断前端返回,微信团队郑重提示：
                                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                        // this.$router.push({path:'payState',query:{state:true}})
                                        
                                        // window.location.href = `http://${window.location.host}/#/payState?state=1`
                                        window.location.href = `http://${window.location.host}/userplat/#/payState?state=1`
                                }else{
                                        // this.$router.push({path:'payState',query:{state:false}})
                                        // window.location.href = `http://${window.location.host}/#/payState?state=0`
                                        window.location.href = `http://${window.location.host}/userplat/#/payState?state=0`
                                } 
                            }); 
                    })
                })
            });
        }
    }
}
</script>
<style scoped>
    .my_order_div {
        display: flex;
        flex-direction: column;
        line-height: 1.5rem;
    }
    .address {
        font-size: 1.4rem;
        font-weight: bolder;
    }
    .product-pic {
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
    }
    .item-right-text {
        margin-right: 1rem;
    }
    .remark {
        border: none;
    }
    .remark:focus{
        outline: none;
    }
    .right-text {
        text-align: right;
        padding-right: 1rem;
    }
    .btn {
        width: 100%;
        border-radius: 0;
        margin: 0;
        height: 3rem;
        color: #fff;
        background: #F23D3D;
        font-size: 1rem;
    }
    .integral{
        display: flex;
        justify-content: space-between;
    }
    .mint-switch{
        flex-direction: row-reverse;
        justify-content: space-between;
        margin-right: 1rem;
    }
</style>